<template>
  <div class="container">
    <h2>
      <i class="iconfont icon-yanhua"></i>
      <span>永远相信美好的事情即将发生</span>
    </h2>
    <div class="time" v-if="tips.year">
      <span>{{ tips.year }}</span>
      <span>{{ tips.time }}</span>
    </div>
      <div class="infoItem">
        <h3>文章类型</h3>
        <div class="box">
          <p>
            <span class="total">{{ info.articleType || 0 }}</span>
            <span>个</span>
          </p>
          <p>
            快来添加文章类型叭
          </p>
        </div>
      </div>
      <div class="infoItem">
        <h3>文章</h3>
        <div class="box">
          <p>
            <span class="total">{{ info.article || 0 }}</span>
            <span>篇</span>
          </p>
          <p>
            快来添加想要发送的文章叭
          </p>
        </div>
      </div>
      <div class="infoItem">
        <h3>评论</h3>
        <div class="box">
          <p>
            <span class="total">{{ info.comment || 0 }}</span>
            <span>条</span>
          </p>
          <p>
            空空如也
          </p>
        </div>
      </div>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted } from 'vue'
import { getInfo } from '../../plugins/request'
export default {
  setup() {
    const state = reactive({
      tips: {
        year: '',
        time: ''
      },
      info: {
        article: 0,
        articleType: 0,
        comment: 0
      }
    })
    onMounted(async () => {
      setInterval(() => {
        const date = new Date()
        const year = date.getFullYear()
        const date2 = new Date(year, 11, 30, 23, 59, 59,999);//
        /*转换成秒*/
        const time = (date2 - date) / 1000; 
        const day = Math.floor(time / (24 * 60 * 60)) 
        const hour = Math.floor(time % (24 * 60 * 60) / (60 * 60)) 
        const minute = Math.floor(time % (24 * 60 * 60) % (60 * 60) / 60); 
        const second = Math.floor(time % (24 * 60 * 60) % (60 * 60) % 60); 
        var str = year + "年还剩" + day + "天" + hour + "时" + minute + "分" + second + "秒"; 
        state.tips = {
          year: `${year}年倒计时`,
          time: `${day}天${hour}时${minute}分${second}秒`
        }
      },1000)
      
      let { data } = await getInfo(null)
      if(data.status != 1) return ElMessage.error(data.message)
      state.info = data.data
    })
    return {
      ...toRefs(state)
    }
  }
}
</script>

<style lang="scss" scoped>
.container{
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  h2{
    width: 100%;
    margin-bottom: 30px;
    .iconfont{
      font-size: 20px;
    }
  }
  .time{
    position: absolute;
    top: 20px;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    background-color: #f78fb3;
    color: #ffffff;
    padding: 5px 5px 5px 20px;
    border-radius: 10px 0 0 10px;
    &::after{
      content: '';
      position: absolute;
      right: 0;
      bottom: -10px;
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid  #f78fb3;
      border-bottom: 10px solid transparent;
    }
  }
  .infoItem{
    width: calc(50% - 15px);
    height: 200px;
    margin-bottom: 30px;
    border-radius: 10px;
    -moz-box-shadow:0px 0px 9px #bdc3c7; 
    -webkit-box-shadow:0px 0px 9px #bdc3c7;
    box-shadow:0px 0px 9px #bdc3c7;
    padding: 20px;
    h3{
      position: relative;
      padding: 5px 0;
      &::after{
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 50%;
        height: 2px;
        background-color: #778beb;
      }
    }
    .box{
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      height: calc(100% - 40px);
      .total{
        font-size: 40px;
        font-style: oblique;
        font-weight: 600;
        margin-right: 10px;
      }
    }
  }
}
@media screen and (max-width: 900px) {
  .container{
    .infoItem{
      width: 100%;
    }
  }
}
</style>